<template>
  <div class="tool-bar-list" :style="{width, marginTop:mgt}">
    <!-- 评论 -->
    <div class="toolbar-item" @click="opencomment">
      <i class="iconfont iconpinglun"></i>
      <span>{{commentCount | playNumFormat}}</span>
    </div>
    <!-- 分享 -->
    <div class="toolbar-item" @click="handleShare">
      <i class="iconfont iconfenxiang"></i>
      <span>{{shareCount}}</span>
    </div>
    <!-- 下载 -->
    <div class="toolbar-item">
      <i class="iconfont iconxiazai"></i>
      <span>下载</span>
    </div>
    <!-- 详情 -->
    <div class="toolbar-item" @click="handleDetailClick">
      <i class="iconfont iconxiangqing"></i>
      <span>详情</span>
    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
      get-container="body"
    />
  </div>
</template>

<script>
import { ShareSheet } from "vant";
import PubSub from "pubsub-js";

export default {
  name: "toolbar",
  props: {
    width: {
      type: String,
      default: "100%"
    },
    mgt: {
      type: String,
      default: "0.48rem"
    },
    commentCount: {
      default: 0
    },
    shareCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      showShare: false,
      clicked: 0,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" }
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" }
        ]
      ]
    };
  },
  methods: {
    opencomment() {
      this.$emit("gocomment");
    },
    handleDetailClick() {
      this.$emit("godetail");
    },
    handleShare() {
      this.showShare = true;
    },
    onSelect(option, index) {
      this.$toast("分享功能还未开发");
      this.showShare = false;
    }
  },
  watch: {
    showShare(newval) {
      PubSub.publish("ToggleMiniindex", newval);
    }
  },
  components: {
    [ShareSheet.name]: ShareSheet
  }
};
</script>

<style lang="less" scoped>
.tool-bar-list {
  .flex-row-nowrap(center);
  .toolbar-item {
    flex: 1;
    .flex-column-mid;
    i {
      font-size: 0.6rem;
    }
    span {
      font-size: 0.2933rem;
      margin-top: 0.1333rem;
    }
  }
}
.van-popup {
  background-color: #222;
}
/deep/.van-share-sheet__cancel {
  background-color: #222;
}
/deep/.van-share-sheet__cancel::before {
  background-color: #444;
  height: 4px;
}
/deep/.van-share-sheet__title {
  .cf;
}
/deep/.van-share-sheet__name {
  .cf;
}
.van-share-sheet__options--border::before {
  border-top: 1px solid #444;
}
</style>